<template>
	<view class="pagebox flex-center">
		<view class="loginbox flex-column-center">
			<image src="../static/logo.png" mode="aspectFill" class="logo"></image>
			<text class="logotext">麦丝儿客服</text>
			
			<button v-if="!codelogin" class="button base-bg w-color" open-type="getPhoneNumber" @getphonenumber="loginsub">手机号快捷登录</button>
			<template v-else>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="form.mobile"/>
				</div>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center mr10" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="form.vcode"/>
					<div class="base-color mr30" v-if="sendAuthCode" @tap="getAuthCode">获取验证码</div>
					<div class="base-color mr30" v-if="!sendAuthCode">{{auth_time}}秒后重新获取</div>
				</div>
				<button class="button base-bg w-color" open-type="getUserInfo" :disabled="disabled" @click="loginsub">注册登录</button>
			</template>
			
			<text class="desc" @tap="codelogin=!codelogin">{{codelogin?'手机号快捷登录':'输入手机号登录/注册'}}</text>
			
			<view class="xieyi flex-row-center pd50-row mt30">
				<checkbox-group @change="isAgreeChange">
					<checkbox value="1" :checked="isAgree" class="checkbox" color="#0583FE" style="transform:scale(0.7);"/>
				</checkbox-group>
				<view style="text-align: justify;">
					我已阅读并同意 
					<text class="base-color" @click="$c.go_url(`/pages/protocol?name=小丝用户协议`)">《小丝用户协议》</text>
					<text class="base-color" @click="$c.go_url(`/pages/protocol?name=隐私政策`)">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				codelogin: false,
				form: {
					"openid":"",
					"mobile":"",
					"vcode":"",
				},
				sendAuthCode: true,
				auth_time: 60,
				auth_timetimer: null,
				isAgree: false,
			};
		},
		onLoad() {
			this.getcodeAndOpenid();
			
		},
		methods: {
			getcodeAndOpenid(){
				uni.login({
					provider: 'weixin',
					success:loginRes=>{
						//获取code给后台换取openid
						this.$reQuest.post('mp/getOpenid',{code: loginRes.code},{token:false}).then(res=>{
							this.form.openid = res.openid;
							this.$c.setOpenid(this.form.openid);
						}).catch(err=>{
						})
					},
					fail:(err)=>{
						this.$c.Toast('未获取到用户身份信息');
					}
				});
			},

			getAuthCode() {
				if(this.form.mobile.length==11){
					this.$reQuest.post(`mp/sendVcode`,{"mobile": this.form.mobile},{token: false}).then(res=>{
						if(res.success){
							if(res.msg=='验证码尚在30分钟有效期内'){
								this.$c.Toast('验证码尚在30分钟有效期内',2000);
							}else{
								this.$c.Toast('请稍后',2000);
								this.sendAuthCode = false;
								//设置倒计时秒
								this.auth_time = 60;
								var auth_timetimer = setInterval(() => {
									this.auth_time--;
									if (this.auth_time <= 0) {
										this.sendAuthCode = true;
										clearInterval(auth_timetimer);
									}
								}, 1000);
							}
						}else{
							this.$c.Toast(res.err)
						}
					}).catch(err=>{
						this.$c.Toast('请求失败')
					});
				}else{
					this.$c.Toast('未正确填写手机号')
				}
			},
			loginsub(e){
				if(this.codelogin){
					if(this.form.vcode.length==6&&this.form.mobile.length==11){
						if(!this.isAgree){
							this.$c.Toast('请先阅读并同意协议！');
							return
						}
						this.login('mp/bind',this.form);
					}else{
						this.$c.Toast('输入有误');
					}
				}else{
					if(!e.detail.code){
						return
					}
					if(!this.form.openid){
						this.$c.Toast('未获取到用户信息');
						return
					}
					if(!this.isAgree){
						this.$c.Toast('请先阅读并同意协议！');
						return
					}
					this.$reQuest.post('mp/getPhone',{code: e.detail.code},{token:false}).then(res=>{
						if(res.errcode==0&&res.errmsg=='ok'){
							this.login('mp/register',{openid:this.form.openid,phone:res.phone_info.purePhoneNumber})
						}
					}).catch(err=>{
					})
				}
			},
			login(url,f){
				this.disabled = true
				this.$reQuest.post(url,f,{token: false},).then(res=>{
						if(res.success){
							this.$c.setToken(res.msg.token);
							let user_ = this.$c.getUser()?JSON.parse(this.$c.getUser()):{};
							const user = {
								...user_,
								...res.msg,
							}
							this.$c.setUser(JSON.stringify(user));
							this.$c.Toast('登录成功');
							setTimeout(()=>{
								this.getuser()
							}, 0);
							
						}else{
							this.disabled = false
							this.$c.Toast(res.err);
						}
				}).catch(err=>{this.disabled = false})
			},
			getuser(){
				this.$reQuest.post('mp/user/get',{},{token:true}).then(res=>{
					if(res.success){
						// if([0,1].includes(res.msg.verify)){
							this.$c.go_url('/pages/index/index','reLaunch');
						// }else{
						// 	this.$c.go_url('/pages/authentication?islogin=1','reLaunch');
						// }
					}else{
						this.$c.Toast(res.err);
					}
				}).catch(err=>{})
			},
			isAgreeChange(e){
				this.isAgree = !!(e.detail.value&&e.detail.value.length)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagebox{
		width: 100vw;height: 100vh;background: linear-gradient( 86deg, #E2EEFF 0%, #EAECFF 100%);
		.loginbox{
			width: 690rpx;height: auto;min-height: 300rpx;
			// border-radius: 30rpx;background: #fff;
			// padding: 30rpx;box-sizing: border-box;
			// position: relative;
			// background-color: rgba(255, 255, 255, 0.3); /* 半透明的白色背景 */  
			// backdrop-filter: blur(10px); /* 模糊背景 */  
			// overflow: hidden; /* 确保子元素不会溢出 */  
			
			/* 额外的样式，增强视觉效果 */  
			// display: flex;  
			// align-items: center;  
			// justify-content: center;  
			// font-size: 24px;  
			// color: #333; /* 文字颜色 */  
			// box-shadow: 0 10px 50px rgba(0, 0, 0, 0.03);
			.logo{
				width: 240rpx;height: 240rpx;border-radius: 240rpx;overflow: hidden;
			}
			.logotext{font-size: 32rpx;font-weight: bold;margin-top: 20rpx;margin-bottom: 100rpx;}
			.button{
				width: 100%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
			}
			.inputbox{
				width: 100%;height: 100rpx;border-radius: 100rpx;background: #fff;font-size: 26rpx;
			}
			.desc{font-size: 22rpx;color: #999;margin-top: 20rpx;}
			
			.xieyi{font-size: 24rpx;}
		}
	}
</style>
